document.addEventListener('DOMContentLoaded', function() {
    new Vue({
        el: '#testdb_app',
        data: {
            message: '欢迎来到测库页面！',
            items: [],
            newItemName: '',
            newItemDescription: ''
        },
        methods: {
            async fetchItems() {
                try {
                    const response = await fetch('/rzwl/api/items');
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    this.items = await response.json();
                } catch (error) {
                    console.error('获取数据失败:', error);
                    this.items = [{ id: 1, name: '示例项目1', description: '这是第一个示例项目' }];
                }
            },
            async createItem() {
                if (!this.newItemName) {
                    alert('项目名称不能为空！');
                    return;
                }
                try {
                    const response = await fetch('/rzwl/api/items', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: this.newItemName,
                            description: this.newItemDescription
                        })
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const newItem = await response.json();
                    this.items.push(newItem);
                    this.newItemName = '';
                    this.newItemDescription = '';
                } catch (error) {
                    console.error('创建项目失败:', error);
                    alert('创建项目失败，请检查控制台。');
                }
            }
        },
        mounted() {
            this.fetchItems();
        }
    });
});
